<template>
  <view class="box">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <view class="title" :style="paddingR && 'padding-' + paddingR">
        举报
      </view>
      <view class="remove" :style="paddingR" @click="bianji"> 举报记录 </view>
    </view>

    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <scroll-view scroll-y="true" class="scroll-view-wrap">
      <view class="tips">
        您的举报将会在5个工作日之内处理，核实后会以系统通知的方式告知您举报结果。
      </view>
      <view class="leixin">
        <view class="name"><span style="color: red">*</span>请选择举报类型（必选,可多选）</view>
        <checkbox-group class="radioList" v-model="xuan" @change="changeType">
          <label class="radio"> <checkbox value="房源不存在" />房源不存在 </label>
          <label class="radio"> <checkbox value="房源信息不真实" />房源信息不真实 </label>
          <label class="radio"> <checkbox value="房源图片不真实" />房源图片不真实 </label>
          <label class="radio" v-if="type"> <checkbox value="佣金虚假" />佣金虚假 </label>
          <label class="radio"> <checkbox value="其他" />其他 </label>
        </checkbox-group>
      </view>
      <view class="shuoming">
        <view class="name"><span style="color: red">*</span>填写举报说明（必填）</view>
        <view class="kuang">
          <textarea
            class="textarea"
            maxlength="300"
            auto-height
            v-model="reportContent"
            placeholder="请详细填写举报理由"
          />
          <p>{{ reportContent.length }}/300</p>
        </view>
      </view>
      <view class="shuoming">
        <view class="name"
          ><span style="color: red">*</span>请上传凭证（请提供截图，最多三张）</view
        >
      </view>
      <view class="shangchuan">
        <view class="cu-form-group">
          <imageUpload v-model="imgList" :lengthNum="3"></imageUpload>
        </view>
      </view>
      <view class="tijiao">
        <checkbox class="round" @click="checked = !checked" :checked="checked"></checkbox>
        <view style="display: inline-block; width: 620rpx">
          <span>举报即默认同意</span>
          <!-- <span style="color: #64b6a8" @click="xieyi(4)">《个人信息保护声名》</span> -->
          <span style="color: #64b6a8" @click="xieyi(3)">《用户协议》</span>
          <span style="color: #64b6a8" @click="xieyi(2)">《隐私政策》</span>
        </view>
        <view class="but" @click="submit">立即举报</view>
        <view class="disclaimer">
          {{ disclaimers }}
        </view>
      </view>
    </scroll-view>

    <view class="motaikuang1" v-show="show1" @click="show1 = false">
      <view class="text">
        <view class="textTitle">{{ text }}</view>
        <scroll-view
          class="scroll-view"
          :scroll-top="scrollTop"
          scroll-y
          @scroll="scrollTop2"
          @click.stop="nullfunction"
        >
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- #ifdef MP-WEIXIN -->
          <rich-text :nodes="data.content"></rich-text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
        </scroll-view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
  import imageUpload from '../../components/imageUpload.vue'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    components: {
      imageUpload,
    },
    data() {
      const pr = this.$menuBtnInfo.pr ? `right: ${this.$menuBtnInfo.pr + 5}px` : '';
      return {
        paddingR: pr,
        xuan: [],
        imgList: [],
        reportContent: '',
        imgUrl: this.$imgSrc,
        id: '',
        houseId: '',
        userInfo: uni.getStorageSync('Pduser'),
        checked: false,
        show1: false,
        text: '',
        content: '获取验证码',
        data: {},
        targetArr: [{}, {}, {}, {}],
        curTarget: 0,
        scrollTop: 0,
        oldScrollTop: 0,
        disclaimers: '',
        type: '',
      }
    },
    onLoad(options) {
      this.id = options.id
      this.houseId = options.houseId
      if (options.type) {
        this.type = options.type
      }
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */

      // 3用户协议
      // 2隐私政策
      this.Disclaimers()
      let _this = this
      _this.$myRequest
        .get('/mob/user/getText', {
          type: 2,
        })
        .then((res) => {
          this.targetArr[2] = res.list[0]
        })
      _this.$myRequest
        .get('/mob/user/getText', {
          type: 3,
        })
        .then((res) => {
          this.targetArr[3] = res.list[0]
        })
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    methods: {
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '12',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      scrollTop2(e) {
        //记录scroll  位置
        this.oldScrollTop = e.detail.scrollTop
      },
      nullfunction() {},
      ViewImage(e) {
        uni.previewImage({
          urls: this.imgList,
          current: e.currentTarget.dataset.url,
        })
      },
      DelImg(e) {
        uni.showModal({
          title: '',
          content: '确定要删除该图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imgList.splice(e.currentTarget.dataset.index, 1)
            }
          },
        })
      },
      submit() {
        if (!this.checked) {
          uni.showToast({
            title: '请同意协议',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.xuan == []) {
          uni.showToast({
            title: '请输选择举报类型',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.reportContent || this.reportContent == '') {
          uni.showToast({
            title: '请输入文字',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.imgList.length) {
          uni.showToast({
            title: '请上传图片',
            icon: 'none',
            mask: true,
          })
          return
        }
        let data = {
          userId: this.userInfo.id,
          bUserId: this.id,
          businessType: '1',
          houseId: this.houseId,
          reportType: this.xuan,
          reportContent: this.reportContent,
          image: this.imgList.join('|'),
        }
        console.log(data)
        // return;
        this.$myRequest.post('/mob/user/saveReport', data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '举报成功',
              icon: 'none',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        })
      },
      changeType(e) {
        console.log(e)
        this.xuan = e.detail.value
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      bianji() {
        uni.navigateTo({
          url: '/pages_my/report',
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      ChooseImage() {
        let _this = this
        uni.chooseImage({
          count: 9 - _this.imgList.length,
          sizeType: ['copressed'],
          sourceType: ['camera', 'album'],
          success(res) {
            //因为有一张图片， 输出下标[0]， 直接输出地址
            const tempFiles = res.tempFiles
            let panduan = false
            tempFiles.forEach((i, j) => {
              let length = '',resType;
              // #ifdef H5
              length = i.name.length
              resType = i.name.substring(length - 1, length)
              // #endif
              // #ifndef H5
              length = i.path.length
              resType = i.path.substring(length - 1, length)
              // #endif
              if (resType != 'g' && resType != 'G') {
                panduan = true
              }
            })
            if (panduan) {
              uni.showToast({
                title: '不支持当前文件格式',
                icon: 'none',
              })
              return
            }
            var imgFiles = res.tempFilePaths
            // console.log(imgFiles);
            if (_this.imgList.length + imgFiles.length > 9) {
              uni.showToast({
                title: '图片最多不能超过9张',
                duration: 2000,
                icon: 'none',
              })
              return
            }
            var uper
            imgFiles.forEach((el) => {
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                duration: 2000,
              })
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: el,
                name: 'file',
                success(res1) {
                  // console.log(res1.data);
                  _this.imgList.push(JSON.parse(res1.data).data[0].url)
                },
              })
            })

            // onProgressUpdate 上传对象更新的方法
            uper.onProgressUpdate(function (res) {})
          },
          fail: (fail) => {
            if (this.$userActiveCancalAct.some(v => fail.errMsg.includes(v.failMsg))) {
              return false;
            }
            this.$SHOWMODAL_TO_SETTINGS();
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      Handle(success) {
        // console.log(success);
        if (!this.canClick) return //改动的是这两行代码
        this.canClick = false
        this.show = false
        this.content = this.totalTime + 's后重新发送'
        this.$myRequest
          .get('/mob/login/phoneVerification.do', {
            phone: this.phone,
          })
          .then((res) => {
            console.log(res)
            this.code = res.CODE
          })
        let clock = window.setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's后重新发送'
          if (this.totalTime < 0) {
            window.clearInterval(clock)
            this.content = '重新发送验证码'
            this.totalTime = 60
            this.canClick = true //这里重新开启
          }
        }, 1000)
      },
      xieyi(type) {
        if (this.curTarget == type) {
          this.show1 = true
          return
        }
        this.curTarget = type
        let _this = this
        this.data = this.targetArr[type]

        //视图会发生重新渲染
        this.scrollTop = this.oldScrollTop
        //当视图渲染结束 重新设置为0
        this.$nextTick(() => {
          this.scrollTop = 0
          this.show1 = true
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .scroll-view-wrap {
    /* #ifdef MP  */
    height: calc(100vh - 98rpx - 88rpx);
    /* #endif */
    /* #ifdef H5 || APP-PULS */
    height: calc(100vh - var(--status-bar-height) - 98rpx);
    /* #endif */
    /* #ifdef APP */
    height: calc(100vh - var(--status-bar-height) - 98rpx);
    /* #endif */
  }
  .box {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333;
    background-color: #fff;
  }

  .tips {
    font-size: 24rpx;
    font-weight: 400;
    color: #64b6a8;
    margin: 30rpx;
  }
  .motaikuang1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding-top: 60rpx;
      padding-bottom: 100rpx;
      border-radius: 50rpx 50rpx 0 0;

      .textTitle {
        font-size: 36rpx;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }

      .scroll-view {
        height: 700rpx;
        margin: 0 auto;
        width: 630rpx;
      }
    }
  }

  .tijiao {
    width: 100%;
    background-color: #fff;

    checkbox {
      vertical-align: top;
      margin-right: 6rpx;
      margin-left: 40rpx;
    }

    span {
      font-size: 26rpx;
    }

    .but {
      width: 670rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 50rpx;
      font-size: 34rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      margin-top: 24rpx;
      margin-left: 40rpx;
    }

    .disclaimer {
      margin: 20rpx 40rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #989898;
    }
  }

  .shangchuan {
    margin-top: 24rpx;
    margin-left: 8rpx;
    padding-bottom: 64rpx;
  }

  .shuoming {
    .name {
      font-size: 34rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }

    .kuang {
      position: relative;
      width: 670rpx;
      min-height: 80rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;

      border: 1px solid #c9c9c9;

      textarea {
        width: 620rpx;
        margin-left: 24rpx;
        margin-top: 14rpx;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        padding-bottom: 50rpx;
      }

      p {
        position: absolute;
        bottom: 10rpx;
        right: 20rpx;
        color: #999999;
      }
    }
  }

  .leixin {
    .name {
      font-size: 34rpx;
      margin-left: 40rpx;
      font-weight: 600;
    }

    .radioList {
      margin-top: 40rpx;
      margin-left: 70rpx;
    }

    .radio {
      display: block;
      font-size: 34rpx;
      margin-bottom: 40rpx;
      width: 100% !important;
      checkbox {
        margin-right: 20rpx;
        transform: scale(1.1);
      }
      /deep/uni-checkbox .uni-checkbox-input {
        border-radius: 0 !important;
      }
      /deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        border-radius: 0 !important;
      }
    }
  }

  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
    .title {
      text-align: center;
    }
    .remove {
      position: absolute;
      right: 30rpx;
      width: 123rpx;
      height: 48rpx;
      border-radius: 6rpx;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
      bottom: 24rpx;
      font-size: 28rpx;
    }
  }

  .grid.col-4.grid-square > uni-view {
    width: 212rpx;
    height: 212rpx;
  }

  .grid.col-4.grid-square > uni-view:nth-child(3n) {
    margin-right: 0;
  }

  /deep/uni-radio .wx-radio-input,
  /deep/uni-radio .uni-radio-input {
    width: 46rpx;
    height: 46rpx;
    border-radius: 0 !important;
  }

  /deep/.uni-radio-input-checked {
    background-color: #64b6a8 !important;
    border-color: #64b6a8 !important;
  }

  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }

  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 28rpx;
    height: 28rpx;
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }

  /deep/.tijiao uni-checkbox::before {
    font-size: 20rpx;
    margin-top: -14rpx;
    right: 4rpx !important;
  }

  .textarea {
    min-height: 200rpx;
  }
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
  }
  /deep/.tijiao uni-checkbox::before {
    font-size: 24rpx;
    margin-top: -14rpx;
    right: 4rpx !important;
  }
</style>
